<!DOCTYPE html>
<html>
<body>
    <canvas id="cavsElem1" width="400" height="300"></canvas>
    <img id="myImage" />
    <script>
        /**
         * 封装了将图像加载到canvas上的函数
         * @param {string} imageURL - 图像的URL或者canvas的数据URL
         * @param {string} targetCanvasID - 目标canvas的ID
         * @param {number} targetWidth - 在canvas上绘制的目标宽度
         * @param {number} targetHeight - 在canvas上绘制的目标高度
         */
        async function drawImageOnCanvas(imageURL, targetCanvasID, targetWidth, targetHeight) {
            const targetCanvas = document.querySelector(`#${targetCanvasID}`);
            const ctx = targetCanvas.getContext('2d');
            const img = new Image();

            // 确保图像加载完成后再进行绘制，提高代码的异步处理能力
            await new Promise((resolve, reject) => {
                img.onload = resolve;
                img.onerror = reject;
                img.src = imageURL;
            });

            // 按照指定的宽高绘制图像
            ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
        }

        // 使用canvas绘制一些内容，这里假设已经有内容了
        // 实际应用中可能会是从外部获取数据进行绘制

        // 将canvas内容转换为JPEG格式的数据URL
        const canvas1 = document.querySelector('#cavsElem1');
        const ctx = canvas1.getContext('2d');
        const dataURL = canvas1.toDataURL('image/jpeg', 0.8); // 0.8是在允许的范围内，但实际应用中应该进行边界检查

        // 直接将数据URL赋值给img元素的src属性
        document.getElementById('myImage').src = dataURL;

        // 在canvas上绘制这个图像
        drawImageOnCanvas(dataURL, 'cavsElem1', 200, 150)
            .catch(error => console.error('图像加载失败:', error));
    </script>
</body>
</html>